<script setup>
import { provide } from 'vue';
import { MYURL as URL } from '@/utils/express/express.js'
import Vrouter from "@/router"
let icon = [`${URL}/public/icon/video.png`, `${URL}/public/icon/action.png`, `${URL}/public/icon/shop.png`, `${URL}/public/icon/my.png`]
const router = Vrouter
provide('change_icon', (index, which) => {
    const btn_icon_image = document.querySelectorAll('.btn-nav-icon img')
    for (let i = 0; i < btn_icon_image.length; i++) {
        btn_icon_image[i].src = icon[i]
    }
    btn_icon_image[index].src = `${URL}/public/icon/${which}_action.png`
})
</script>

<template>
    <!-- <keep-alive> -->
    <RouterView />
    <!-- </keep-alive> -->
    <div class="bottom-nav">
        <div>
            <router-link to="/index" class="btn-nav-icon">
                <img :src="icon[0]">
                首页
            </router-link>
        </div>
        <div>
            <router-link to="/action" class="btn-nav-icon">
                <img :src="icon[1]">
                动态
            </router-link>
        </div>
        <div @click="router.push('/upload')" class="bottom-nav-center">
            <img src="@/assets/img/bottom-center.png">
        </div>
        <div>
            <router-link to="/shop" class="btn-nav-icon">
                <img :src="icon[2]">
                双11
            </router-link>
        </div>
        <div>
            <router-link to="/my" class="btn-nav-icon">
                <img :src="icon[3]">
                我的
            </router-link>
        </div>
    </div>
    <div class="bottom-nav-placeholder"></div>
</template>

<style scoped lang="less">
.bottom-nav {
    border-top: 1px rgba(0, 0, 0, 0.032) solid;
    background-color: white;
    width: 100%;
    position: fixed;
    bottom: 0;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    padding: 10px 0;
    font-size: 12px;

    .btn-nav-icon {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 3px;
    }

    img {
        width: 20px;
    }

    .bottom-nav-center {
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #eb6e9b;
        border-radius: 30%;
        padding: 10px;
    }
}

.router-link-active {
    color: #ed7098;
}

.bottom-nav-placeholder {
    height: 200px;
}
</style>
